<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
    <div class="nav">五子棋对战</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 处于垂直水平居中 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script>
        $.ajax({
            type: 'get',
            url: '/userinfo',
            success: function(body) {
                let screenDiv = document.querySelector('#screen');
                screenDiv.innerHTML = "玩家: " + body.data.username + " <br>分数: " + body.data.score
                      + "<br> 比赛场次: " + body.data.totalCount + " <br>获胜场数: " + body.data.winCount;
            },
            error: function() {
                alert("获取用户信息失败!");
            }
        });

        //进行初始化 websocket ,实现前端的匹配逻辑
        //
        var websocket = new WebSocket("ws://localhost:8080/findMatch")
        websocket.onopen = function() {
            console.log("onopen");
        }
        websocket.onopen = function() {
            console.log("onclose");  
        }
        websocket.onopen = function() {
            console.log("onerror");
        }
        // 监听页面关闭事件,在关闭页面之前,手动调用这里的websocket 的 close方法
        window.onbeforeunload  = function() {
            websocket.close();
        }

        //处理服务器返回的响应
        websocket.onmessage = function(e) {
            // 处理服务器返回的响应数据,  开始匹配/停止匹配
            // 解析的到的响应对象,返回的数据是一个JSON字符串,解析为js对象
            let resp = JSON.parse(e.data);
            let matchButton = document.querySelector('#match-button');
            if(!resp.ok) {
                console.log("游戏大厅中接收到失败响应!" + resp.reason);
                return;

            }
            if(resp.message == 'startMatch') {
                //开始匹配请求发送成功
                console.log("进入匹配队列成功!");
                matchButton.innerHTML = '匹配中...(点击停止)';
            } else if(resp.message == 'stopMatch') {
                // 结束匹配请求发送成功
                console.log("离开匹配队列!");
                matchButton.innerHTML = '开始匹配';
            } else if(resp.message == 'matchSuccess') {
                //已经匹配到对手
                console.log("匹配到对手! 进入游戏房间!");
                location.assign("/game_room.html");
            } else if (resp.message == 'repeatConnection') {

                alert("账号已在其他地方登录，正在跳转至登录页面！");
                location.assign("/login.html");
            }else{
                console.log("收到了非法的响应! message=" + resp.message);
            }
        }
    
        //匹配按钮点击事件
        let matchButton = document.querySelector('#match-button');
        matchButton.onclick = function() {
            //确认是否连接
            if(websocket.readyState == websocket.OPEN) {
                //发送的数据两种可能,开始匹配/停止匹配
                if(matchButton.innerHTML == '开始匹配') {
                    console.log("开始匹配");
                    websocket.send(JSON.stringify({
                        message: 'startMatch',
                    }));
                } else if(matchButton.innerHTML == '匹配中...(点击停止)') {
                    console.log("停止匹配");
                    websocket.send(JSON.stringify({
                        message: 'stopMatch',
                    }));
                }

            } else {
                alert("当前连接已经断开,请重新登录!");
                location.assign('/login.html');
            }
        }

    </script>
</body>
</html>